<template>
  <v-modal class="v-toast" ref="toast">
    <slot/>
  </v-modal>
</template>

<script>
export default {
  props: {
    duration: {
      default: 2000
    }
  },
  methods: {
    open() {
      this.$refs.toast.open();
      this.$timeout(() => this.close(), this.duration);
    },
    close() {
      this.$refs.toast.close();
      this.$timeout(() => this.$emit("closed"), 300);
    }
  }
};
</script>

<style lang="less">
.v-toast {
  > .content {
    left: 50%;
    bottom: 20%;
    opacity: 0;
    max-width: 90%;
    position: fixed;
    color: #ffffff;
    padding: 6px 10px;
    visibility: hidden;
    border-radius: 4px;
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%) scale(0.9);
    transition: 300ms;
  }
  &.show {
    > .content {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scale(1);
    }
  }
}
</style>
